<template>
	<view class="personalInfor-page">
		<head-box></head-box>
		<view class="personalInfor-page-main">
			<view class="personalInfor-page-main-box">
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>验证码</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input"
                    maxlength="6"
                    style="width: 50%;" focus type="text" placeholder="请输入验证码" v-model="captcha"/>
						<button type="default" size="mini" @tap="onGetSms" :disabled="opt.isSend">{{opt.codeText}}</button>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>新密码</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="20"  type="password" placeholder="请设置6-20位字符" v-model="userPwd"/>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>确认新密码</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="20" type="password" placeholder="请再次输入新密码" v-model="userPwd2"/>
					</view>
				</view>
				<view class="save-btn" @tap="saveData()">
					<view class="save-btn-text"><text>确认修改</text></view>
				</view>
			</view>
		</view>
		<tabs-box></tabs-box>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import { updatePwd,getSms } from '@/api/login';
	import {send600} from '@/common/util'
	export default {
		data() {
			return {
				userPwd:'',//新密码
				userPwd2:'',//再一次新密码
				captcha:'', //验证码
        opt:{
				  count:60,
          timer:null,
          codeText:'获取验证码',
          isSend:false
        }
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			if(!uni.getStorageSync("token"))
			{
				//uni.navigateTo({
				//	url:"../login/login"
				//})
				//return;
			}
			this.userPhone = this.userInfo.userPhone;
		},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
		methods:{
		  //发送验证码
      onGetSms(){
				const param = {"mobile":this.userInfo.userPhone,"smsmode":2}

				getSms(param).then(res => {
					if(res.success)
					{
						this.$api.msg('验证码发送成功');
            send600(this.opt)
					}
					else
						this.$api.msg(res.message);
				});
			},
			saveData()
			{
				if( this.captcha.length==0)
				{
					this.$api.msg('请输入验证码');
					return;
				}
				if( this.userPwd.length==0)
				{
					this.$api.msg('请输入新密码');
					return;
				}
				if( this.userPwd.length<6 ||  this.userPwd.length>20)
				{
					this.$api.msg('请输入6-20位字符');
					return;
				}
				if( this.userPwd !=  this.userPwd2)
				{
					this.$api.msg('两次密码输入不一致');
					return;
				}
				const params ={"captcha":  this.captcha,"userPhone":  this.userPhone,"userPwd":  this.userPwd}
				updatePwd(params).then(res => {
					if(res.success)
					{
						this.$api.msg('密码设置成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 3000);
					} else {
					  this.$api.msg(res.message)
          }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.personalInfor-page{
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 200rpx;
		.top-fixed{
			position: fixed;
			top: 0;
			z-index: 1;
		}
		.top{
			width: 100%;
			height:100rpx;
			padding:0 30rpx;
			// background-color: #007AFF;
			background-color: #f7f7f7;
			box-shadow: 0 1px 6rpx #ccc;
			display:flex;
			justify-content:space-between;
			align-items: center;
			box-sizing: border-box;
			.top-text{
				color:#000;
				font-size:34rpx;
			}
		}
		.top-box{
			width: 100%;
			height: 100%;
			position: relative;
			text-align: center;
			line-height: 100rpx;
			.back-img{
				width:44rpx;
				height:40rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin:auto;
				margin-left: 0rpx;
			}
		}
		.personalInfor-page-main{
			width: 100%;
			padding:30rpx;
			box-sizing: border-box;
			.personalInfor-page-main-box{
				width: 100%;
				._main-item{
					// height: 86rpx;
					border-bottom: 1px solid rgba(200,199,204,0.5);
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					._main-item-chunk{
						font-size: 34rpx;
						color: #000;
						line-height: 84rpx;
					}
					._main-item-label{
						width: 30%;
					}
					._main-item-val{
						width: 70%;
						display: flex;
						flex-wrap: nowrap;
						justify-content: flex-end;
						align-items: center;
						button{
							background-color: #dd524d;
							color: #FFFFFF;
              white-space: nowrap;
						}
						._main-item-val-head{
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							display: flex;
							.head-img{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						._main-item-val-input{
							width: 100%;
							text-align: left;
							display: flex;
							._main-item-val-input-text{
								display: flex;
								flex-wrap: nowrap;
								align-items: center;
							}
							.drop-dowm-img{
								width: 30rpx;
								height: 30rpx;
								margin-left: 10rpx;
								transform: rotateZ(270deg);
							}
						}
						.drop-dowm-img{
							width: 30rpx;
							height: 30rpx;
							margin-left: 10rpx;
							transform: rotateZ(270deg);
						}
					}
				}
				.save-btn{
					width: 100%;
					text-align: center;
					margin-top: 60rpx;
				}
				.save-btn-text{
					width: 50%;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 1.42;
					position: relative;
					display: inline-block;
					margin-bottom: 0;
					padding: 12rpx 24rpx;
					cursor: pointer;
					-webkit-transition: all;
					transition: all;
					-webkit-transition-timing-function: linear;
					transition-timing-function: linear;
					-webkit-transition-duration: .2s;
					transition-duration: .2s;
					text-align: center;
					vertical-align: top;
					white-space: nowrap;
					border-radius: 6rpx;
					border-top-left-radius: 6rpx;
					border-top-right-radius: 6rpx;
					border-bottom-right-radius: 6rpx;
					border-bottom-left-radius: 6rpx;
					background-clip: padding-box;
					color: #fff;
					border: 1px solid #007aff;
					background-color: #007aff;
				}
			}
		}
	}
</style>
